<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
        <link rel="stylesheet" href="css/reserves.css">
        <style>
            /* style the list to maximize the droppable hitarea */
            .casella { width: 100px; height: 100px; margin: 0; padding: 1em; background-color: #bbbbbb; }
        </style>
        <script>
            $(function() {
                $(".reserves li").draggable({
                    appendTo: "body",
                    helper: "clone",
                    cursos: "move",
                    revert: "invalid"
                });
                $(".casella").droppable({
                    activeClass: "ui-state-default",
                    hoverClass: "ui-state-hover",
                    accept: ":not(.ui-sortable-helper)",
                    drop: function(event, ui) {
                        $(this).find(".placeholder").remove();
                        $("<li></li>").text(ui.draggable.text()).appendTo(this);
                    }
                }).sortable({
                    items: "li:not(.placeholder)",
                    sort: function() {
                        // gets added unintentionally by droppable interacting with sortable
                        // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                        $(this).removeClass("ui-state-default");
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="esquerra" class="barra">
            <ul class="reserves">
                <li>Un</li>
                <li>Dos</li>
                <li>Tres</li>
                <li>Quatre</li>
                <li>Cinc</li>
            </ul>
        </div>
        <div id="dreta" class="contingut">
            <table>
                <tr>
                    <td>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td><div class="casella placeholder"></div></td>
                    <td><div class="casella placeholder"></div></td>
                </tr>
                <tr>
                    <td><div class="casella placeholder"></div></td>
                    <td><div class="casella placeholder"></div></td>
                </tr>
            </table>

        </div>
    </body>
</html>
